<script setup>
import {FButton, FDatePicker, FGrid, FGridItem, FInput, FModal, FPagination, FSpace, FTable} from '@fesjs/fes-design'
import {useHistoryRecordStore} from "../../store/HistoryRecordStore.js";
import {reactive,ref} from "vue";


const historyRecordStore = useHistoryRecordStore();

let showParamDialog = ref(false);
let paramContent = ref("");

let columns = [
  {
    "label": "命令名称",
    "prop": "title"
  },
  {
    "label": "命令编码",
    "prop": "actionName"
  },
  {
    "label": "执行人",
    "prop": "erp"
  },
  {
    "label": "执行时间",
    "prop": "runTime"
  },
  {
    "label": "操作",
    "prop": "op",
    width: 100,
    action: [
      {
        label: '详情',
        func: (row) => {
          paramContent.value = row.params;
          showParamDialog.value = true;
        },
      }
    ]
  }
]
const pageSizeOption = reactive([10, 20, 30, 50, 100]);

</script>

<template>
  <FGrid>
    <FGridItem :span="24">
      <FSpace>
        <FText>执行人</FText>
        <FInput v-model="historyRecordStore.searchData.erp"/>
        <FText>命令名称</FText>
        <FInput v-model="historyRecordStore.searchData.title"/>
        <FText>命令编码</FText>
        <FInput v-model="historyRecordStore.searchData.actionName"/>
        <FText>执行时间</FText>
        <FDatePicker
            type="datetimerange"
            clearable
            v-model="historyRecordStore.searchData.runTime"
        />
        <FButton type="primary" @click="historyRecordStore.searchBtn()">查询</FButton>
        <FButton type="text" @click="historyRecordStore.resetBtn()">重置</FButton>
      </FSpace>
    </FGridItem>
  </FGrid>
  <FGrid>
    <FGridItem :span="24">
      <div class="col-demo">
        <FTable
            bordered="true"
            size="small"
            verticalLine
            :data="historyRecordStore.rows"
            :layout="layout"
            :hoverable="hoverable"
            :columns="columns"
            :striped="striped">
        </FTable>
      </div>
    </FGridItem>
  </FGrid>
  <FGrid>
    <FGridItem :span="24">
      <div class="col-page">
        <FPagination
            v-model:currentPage="historyRecordStore.page.currentPage"
            v-model:pageSize="historyRecordStore.page.pageSize"
            :total-count="historyRecordStore.page.totalCount"
            show-size-changer
            :pageSizeOption="pageSizeOption"
            @change="historyRecordStore.pageChange"
        />
      </div>

    </FGridItem>
  </FGrid>

  <FModal
      v-model:show="showParamDialog"
      title="执行参数"
      displayDirective="show"
      @ok="showParamDialog = false"
  >
    <FInput type="textarea" placeholder="请输入" v-model="paramContent"/>
  </FModal>
</template>

<style scoped>
.fes-grid-item .col-demo {
  margin: 4px 0;
  padding: 0.5em;
  color: #ffffff;
  text-align: center;
}

.fes-grid-item .col-page {
  padding-left: 0.5em;
  color: #ffffff;
  text-align: center;
}
</style>